<template>
  <div class="main">
    <Navigation></Navigation>
    <div class="sidebar">
      <div class="sidebar-bg">
        <img class="up" v-if="isUp" src="@/assets/images/dekt/up.png" alt="">
        <img class="down" v-if="isDown" src="@/assets/images/dekt/down.png" alt="">
        <scroll-container ref="scrollContainer" :listenShowNav="false">
          <multi-list
            @scrollTo="scrollTo"
            @scrollFoc="scrollFoc"
            :groupDatas="gradeList"
            :head="head"
          >
            <ul>
              <li
                :class="{active: gradeList.focArr[0][index],'holdActive':index==holdIndex}"
                v-for="(grade,index) in gradeList.dataArr[0].data"
                :key="index"
              >
                {{grade.folderName}}
                <span :data-index="'tar_0_'+index"></span>
                <!-- <router-link to="lesson">{{grade}}</router-link> -->
              </li>
            </ul>
          </multi-list>
        </scroll-container>
      </div>
    </div>
    <dektlist :groupDatas="groupDatas" :group="1"></dektlist>
    <personal ref="personal"
              v-show="showPersonal"
              :personalBg="personalBg"
              @closePersonal="closePersonal"
              :changePersonal="changePersonal"
    ></personal>
  </div>
</template>
<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";
  import multiList from "@/components/base/multi-list/multi-list";
  import dektlist from "@/components/dekt/dekt-list";
  import imglist_w312 from "../ImgList_w312";
  import Navigation from "@/components/Navigation";
  import personal from "@/components/personal/personal";
  import mixinCommon from "@/assets/js/mixin-common"

  export default {
    name: "dekt",
    components: {
      Navigation,
      dektlist,
      scrollContainer,
      multiList,
      imglist_w312,
      personal
    },
    mixins: [mixinCommon],
    data() {
      return {
        changePersonal: {},  // 登录的输入信息删除
        personalBg: require("@/assets/images/personal/personal_bg.png"),  //登录的背景图
        showPersonal: false,  // 是否显示登录
        gotoUrl: "",  // 登录成功后的跳转地址
        gotoObjid: "", // 跳转时所在的焦点
        groups: [0, 1],
        holdIndex: -1,
        scrollY: 0,
        isUp: false,
        isDown: true,
        folderCodes: [
          "educ_41_89", //求索 ...
          "aaa_001_99_1", // 人文纪实
          "iptvtest_001_93_4_3", // 国学
          "iptvtest_001_93_6_1", // 安全成长
          "iptvtest_001_93_3_1", // 鲨鱼
          "iptvtest_001_93_5_2", // 钢琴 ...
          "iptvtest_001_93_2_2"  // 悟空英语
        ],
        head: {
          top: "100-2",
          right: "1-0"
        },
        groupDatas: {
          dataArr: [
            {
              maxLine: 4,
              dynamic: false,
              title: "华数课堂",
              data: []
            }
          ],
          focArr: [[]]
        },
        gradeList: {
          dataArr: [
            {
              maxLine: 1,
              dynamic: false,
              data: []
            }
          ],
          focArr: [[]]
        }
      };
    },
    methods: {
      scrollFoc(obj) {
        if (obj.group == 0) {
          this.holdIndex = -1;
        }
        obj.objindex > 0 ? this.isUp = true : this.isUp = false
        obj.objindex === this.gradeList.dataArr[0].data.length - 1 ? this.isDown = false : this.isDown = true
        this.getData(this.gradeList.dataArr[0].data[obj.objindex].folderCode);
        this.hs.areaLastFocus[1] = null;
        // this.$router.push('/tbkt_hskt/'+this.gradeList[0].data[obj.objindex].folderCode)
      },
      setBackObj(backObj) {
        this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
      },
      closePersonal() {
        this.showPersonal = false;
        if (this.gotoUrl && this.$refs.personal.getStudent()) {
          this.setBackObj({
            backFocArr: [this.hs.areaLastFocus[0].objid, this.gotoObjid]
          })
          this.$router.push(this.gotoUrl);
        } else {
          this.hs.initFocus(this.gotoObjid)
        }
      },
      getList() {
        this.folderCodes.forEach((item, index) => {
          let url =
            "http://ips-4k.hzdtv.tv/dataquery/childFolders?folderCode=" +
            item +
            "&pageIndex=1&pageItems=9";
          this.hs.ajax.post(
            "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
            "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
            obj => {
              obj = JSON.parse(obj);
              this.gradeList.dataArr[0].data = this.gradeList.dataArr[0].data.concat(
                obj.folders
              );
              if (index === 1) {
                this.gradeList.dataArr[0].data.push({
                  desc: "",
                  folderCode: "iptvtest_001_93_8",
                  folderName: "戏曲采风",
                  folderUrl: "",
                  images: null,
                  level: 2,
                  newFlag: 0,
                  parentFolderCode: "",
                  siteCode: "",
                  sortIndex: 1
                })
              }
            }, 0, function (msg) {
            }, 3000);
        });
      },
      getData(folderCode) {
        let url =
          "http://ips-4k.hzdtv.tv/dataquery/childFolders?folderCode=" +
          folderCode +
          "&cImageMode=312,413,JPEG&pageIndex=1&pageItems=50";
        this.hs.ajax.post(
          "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
          "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
          obj => {
            obj = JSON.parse(obj);
            // console.log(obj);
            this.groupDatas.dataArr[0].data = obj.folders;
          },
          0, function (msg) {
          }, 3000);
      }
    },
    created() {
      this.getList();
      this.getData(this.gradeList.dataArr[0].data[0].folderCode);
      // 埋点
      this.wasuLog(this.$route.path, '第二课堂')
    },
    mounted() {
      this.hs.addBlurArea([0], (group, obj, objindex) => {
        this.holdIndex = objindex;
      });
      this.hs.addSelect(this.groups, (group, objid, objindex) => {
        if (group === 1) {
          if (!this.$refs.personal.getStudent()) {
            this.showPersonal = true;
            this.hs.initFocus("105-0");
            this.gotoUrl = "/hskt/zsd/" + this.groupDatas.dataArr[0].data[objindex].folderCode
            this.gotoObjid = objid;
          } else {
            this.setBackObj({
              backFocArr: [this.hs.areaLastFocus[0].objid, this.hs.focObj.objid]
            });
            this.$router.push(
              "/hskt/zsd/" + this.groupDatas.dataArr[0].data[objindex].folderCode
            );
          }


        }
      });
      this.hs.initFocus("100-3");
      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        // console.log(JSON.stringify(focArr));
        this.hs.initFocus(focArr[0]);
        setTimeout(() => {
          this.hs.initFocus(focArr[1]);
        }, 200);
      }

      this.bridge.whenKeyBack = () => {

        // 当焦点区域在显示登录窗口所在区域的时候,退出登录窗口.
        if (this.hs.focObj.group === 105 || this.hs.focObj.group === 107) {
          // 关闭
          this.closePersonal()
        } else if (this.hs.focObj.group === 106) {
          // 删除
          this.changePersonal = {delete: true}
        } else {
          // 当页面显示的时候就返回首页, 隐藏的时候, 就显示页面
          this.$bridge.callHandler(
            "wasu_function_gotoApplication",
            {
              packageName: "com.wasu.launcher",
              className: "com.wasu.launcher.MainActivity"
            },
            function (response) {
            }
          );
        }
      };

    }
  };
</script>

<style scoped lang="less">
  .main {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    display: flex;
    .bg1 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
      z-index: -1;
    }
    .sidebar {
      box-sizing: border-box;
      padding-top: 260px;
      padding-bottom: 100px;
      margin-left: 120px;
      margin-right: 72px;
      flex-shrink: 0;
      width: 240px;
      height: 1080px;
      overflow: hidden;
      .sidebar-bg {
        position: relative;
        padding: 50px 10px;
        border-radius: 8px;
        background: linear-gradient(#53ceff, #53ceff),
        linear-gradient(#6ec6e8, #6ec6e8);
        .up {
          position: absolute;
          top: 6px;
          left: 95px;
        }
        .down {
          position: absolute;
          bottom: 20px;
          left: 95px;
        }
        .multi-container {
          text-align: center;
          ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding-top: 2px;
            li {
              text-align: center;
              margin-bottom: 48px;
              padding: 0;
              list-style: none;
              display: block;
              width: 200px;
              height: 60px;
              line-height: 60px;
              border-radius: 30px;
              // background: #6ec6e8;
              color: #104572;
              font-size: 42px;
              position: relative;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              span {
                position: absolute;
                bottom: -20px;
              }

            }
            li:last-child {
              margin-bottom: 10px;
            }

            .holdActive {
              color: #fbff92;
              background-color: #09508a;
            }
            .active {
              color: #ffffff;
              background: #0e60e9;
              transform: scale(1.1);
              border: 2px solid #fff;
            }
          }
        }
      }
    }
  }
</style>
